<template>
  <div class="activeType">
    <ul class="active-Typelist">
      <li
        v-for="(item, index) in actTypelist"
        :key="index"
        :class="`${currentIndex == index ? 'active' : ''} actType`"
        @click="nameSelect(item.msg, index)">
        {{ item.msg }}
      </li>
    </ul>
    <h3>{{ str }}</h3>
    <ul class="active-goodslist">
      <li v-for="(item, index) in shopList" :key="index">
        <img :src="item.img" />
        <h3>{{ item.msg }}</h3>
        <h4>
          {{ item.pirce }} <span>{{item.oldpirce}}</span>
        </h4>
      </li>
    </ul>
  </div>
</template>

<script>
import mouth from '../../../../public/utils/mouth'
export default {
  data() {
    return {
      currentIndex: 0,
      str: "潮款爆鞋",
      shopId:0,
      shopList:[],
      actTypelist: [
        {
          msg: "潮款爆鞋",
        },
        {
          msg: "人气潮服",
        },
        {
          msg: "潮流鞋包",
        },
        {
          msg: "潮流美妆",
        },
      ],
    };
  },
  methods: {
    nameSelect(item, index) {
      this.currentIndex = index;
      this.str = item;
      this.shopId = index;
       this.listGoods();
    },
    listGoods() {
      mouth.get("/comments", {
            params:{
              kind :this.shopId
            }
        })
        .then((res) => {
          this.shopList = res.data;
          console.log(this.shopList,'父组件');
        })
        .catch((err) => {
          console.log("出错了", err);
        });
    },
    },
     created() {
    this.listGoods();
  },
  }
  

</script>

<style scoped>
.active-Typelist {
  display: flex;
  padding-left: 00.14rem;
}
.active-Typelist .active {
  color: #b41b51;
}
.actType {
  font-size: 0.16rem;
  color: white;
  flex: 1;
  height: 0.6rem;
  line-height: 00.6rem;
}
.activeType h3 {
  text-align: center;
  padding-bottom: 0.18rem;
}
.active-goodslist {
  padding: 0 0.14rem;
  display: flex;
  flex-wrap: wrap;
}
.active-goodslist li {
  width: 33%;
  height: 2.05rem;
  border-right: 1px solid gray;
  border-bottom: 1px solid gray;
}
.active-goodslist li img{
    height:0.8rem;
    margin: auto;display: block;
    margin-top: 00.2rem;
}
.active-goodslist li h3 {
  padding: 0.08rem;
  box-sizing: content-box;
  font-size: 00.14rem;
  height: 0.28rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.active-goodslist li h4{
  /* margin-top: 00.1rem; */
  padding: 0.08rem;
  box-sizing: content-box;
  color: red;
  font-size: 0.18rem;
  height: 0.24rem;
  line-height: 0.24rem;
}
.active-goodslist li h4 span{
    color: #bebcc4;
    margin-left: 0.06rem;
    font-size: 00.14rem;
    line-height: 00.24rem;
  text-decoration-line: line-through;
}
</style>